<template>
	<view>
		<view class="sort">
			<view class="sort-box">
				<view :class=" currentSortType == 'default' ? 'active item' : 'item'" @click="openSortFilter" id="defaultSort">
					<text class="txt">综合</text>
				</view>
				<view :class="['item', 'by-price', { active: currentSortType == 'price', asc: currentSortOrder == 'asc', desc: currentSortOrder !== 'asc' }]"
				 @click="openSortFilter" id="priceSort">
					<text class="txt">价格</text>
				</view>
				<view :class=" currentSortType == 'category' ? 'active item' : 'item'" @click="openSortFilter" id="categoryFilter">
					<text class="txt">分类</text>
				</view>
			</view>
			<view class="sort-box-category" v-if="categoryFilter">
				<view :class="item.checked ? 'active item' : 'item'" v-for="(item, index) of filterCategory" :key="cate-item.id"
				 :data-category-index="index" @click="selectCategory">{{item.categoryName}}</view>
			</view>
		</view>
		<!-- <view class="cate-item">
			<view class="b"> -->
			<view class="product-list">
				<view v-for="(item, index) of dataList" :key="index">
					<navigator  :url="'/pages/mall/detail?typeId=1&navigateValue=' + item.productId">
						<!-- <image class="img" :src="item.baseUrl+item.originalImageUrl+'.tbi'" />
						<text class="name">{{item.productName}}</text>
						<text class="price"  v-if="item.maxPrice - item.minPrice > 0.01">￥{{item.maxPrice}}</text>
						<text class="price">￥{{item.minPrice}}</text> -->
						<view class="product">
							<image class="product-image" lazy-load  :src="item.baseUrl+item.originalImageUrl+'.tbi'"></image>
							<view class="product-title">{{item.productName}}</view>
							<view class="product-price">
								<text class="product-price-favour"  v-if="item.maxPrice - item.minPrice > 0.01">￥{{item.maxPrice}}</text>
								<text class="product-price-original">￥{{item.minPrice}}</text>
								<text class="product-tip">{{item.tip}}</text>
							</view>
						</view>
					 </navigator>
				</view>
		<!-- 	</view>
		</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentSortType: {
				type: String,
				default () {
					return {}
				}
			},
			currentSortOrder: {
				type: String,
				default () {
					return {}
				}
			},
			openSortFilter: {
				type: Function,
				default () {
					return {}
				}
			},
			categoryFilter: {
				type: Boolean,
				default () {
					return {}
				}
			},
			filterCategory: {
				type: Array,
				default () {
					return {}
				}
			},
			selectCategory: {
				type: Function,
				default () {
					return {}
				}
			},
			dataList: {
				type: Array,
				default () {
					return {}
				}
			},
		}
	}
</script>

<style>
.sort{
    position: relative;
    background: #fff;
    width: 100%;
    height: 78upx;
}
.sort-box{
    background: #fff;
    width: 690upx;
    height: 78upx;
    overflow: hidden;
    padding: 0 30upx;
    display: flex;
    border-bottom: 1px solid #d9d9d9;
}
.sort-box .item{
    height: 78upx;
    line-height: 78upx;
    text-align: center;
    flex:1;
    color: #333;
    font-size: 30upx;
}
.sort-box .item .txt{
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
}
.sort-box .item.active .txt{
    color: #b4282d;
}
.sort-box .item.by-price{
    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png) 155upx center no-repeat;
    background-size: 15upx 21upx;
}
.sort-box .item.by-price.active.asc{
    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png) 155upx center no-repeat;
    background-size: 15upx 21upx;
}
.sort-box .item.by-price.active.desc{
    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png) 155upx center no-repeat;
    background-size: 15upx 21upx;
}
.sort-box-category{
    background: #fff;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 40upx 40upx 0 0;
    border-bottom: 1px solid #d9d9d9;
}
.sort-box-category .item{
    height: 54upx;
    line-height: 54upx;
    text-align: center;
    float: left;
    padding: 0 16upx;
    margin: 0 0 40upx 40upx;
    border: 1px solid #666;
    color: #333;
    font-size: 24upx;
}
.sort-box-category .item.active{
    color: #b4282d;
    border: 1px solid #b4282d;
}
/* .cate-item .b{
  width: 750upx;
  height: auto;
  overflow: hidden;
  border-top: 1upx solid #f4f4f4;
  margin-top: 20upx;
}
.cate-item .b .item{
  float: left;
  background: #fff;
  width: 375upx;
  padding-bottom: 33.333upx;
  border-bottom: 1upx solid #f4f4f4;
  height: auto;
  overflow: hidden;
  text-align: center;
}
.cate-item .b .item-b{
 border-right: 1upx solid #f4f4f4;
}
.cate-item .item .img{
    margin-top: 10upx;
  width: 302upx;
  height: 302upx;
}
.cate-item .item .name{
  display: block;
  width: 325upx;
  height: 35upx;
  padding: 0 20upx;
  overflow: hidden;
  margin: 11.5upx 0 22upx 0;
  text-align: center;
  font-size: 30upx;
  color: #333;
}
.cate-item .item .price{
  display: block;
  width: 365.625upx;
  height: 30upx;
  text-align: center;
  font-size: 30upx;
  color: #b4282d;
} */
	.product {
		padding: 10upx 20upx;
	
		display: flex;
		flex-direction: column;
		/* background-color: white;
		border: solid 1px #AAAAAA;
 */
	}

	.product-image {
		height: 330upx;
		width: 330upx;
	}

	.product-title {
		width: 330upx;
		font-size: 32upx;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.product-price {
		font-size: 28upx;
		position: relative;
	}

	.product-price-original {
		color: #E80080;
	}

	.product-price-favour {
		color: #888888;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.product-tip {
		position: absolute;
		right: 10upx;
		background-color: #FF3333;
		color: #FFFFFF;
		padding: 0 10upx;
		border-radius: 5upx;
	}
	
	.product-list {
		display: flex;
		width: 750upx;
		flex-wrap: wrap;
		flex-direction: row;
	}
</style>
